<template>
  <div class="detail">
    <template v-if="type === 'self'">
      <div class="box-result">
        <div class="box-title">考核结果</div>
        <div class="box-li">
          <div class="li">
            <div class="li-top">季度得分</div>
            <div class="li-bottom" v-if="infoData.rankType !== '2'">{{ infoData.totalScore }}分</div>
            <div class="li-bottom" v-else>/</div>
          </div>
          <div class="li">
            <div class="li-top">考核等次</div>
            <div class="li-bottom">{{ infoData.assessRank | AssessRankFilter }}</div>
          </div>
        </div>
        <div class="box-li">
          <div class="li">
            <div class="li-top">全局排名</div>
            <div class="li-bottom" v-if="infoData.rankType !== '2'">{{ infoData.overallRank }}</div>
            <div class="li-bottom" v-else>/</div>
          </div>
          <div class="li">
            <div class="li-top">部门排名</div>
            <div class="li-bottom" v-if="infoData.rankType !== '2'">{{ infoData.orgRank }}</div>
            <div class="li-bottom" v-else>/</div>
          </div>
        </div>
        <div style="color: #d9001b" v-if="infoData.rankType === '2'">注：直接定等次（无考核分、不计排名）</div>
      </div>
      <div class="box_duty">
        <div class="box-title">关键词</div>
        <div class="duty-con">
          <div v-for="(item, index) in infoData.keyWords" :key="index" @click="toWork(item)">
            <img :src="ImgDeal(item.label)" alt="" />
            <span>{{ item.name }}</span>
          </div>
          <empty v-if="!infoData && !infoData.keyWords.length"></empty>
        </div>
      </div>
    </template>
    <template v-if="type === 'org'">
      <div class="box-result">
        <div class="box-title">考核结果</div>
        <div class="box-li">
          <div class="li">
            <div class="li-top">季度得分</div>
            <div class="li-bottom">{{ infoData.orgTotalScore }}</div>
          </div>
          <div class="li">
            <div class="li-top">考核等次</div>
            <div class="li-bottom">{{ infoData.assessRank }}</div>
          </div>
        </div>
        <div class="box-li">
          <div class="li">
            <div class="li-top">考核片组排名</div>
            <div class="li-bottom">{{ infoData.groupRank }}/{{ infoData.groupCount }}</div>
          </div>
          <div class="li">
            <div class="li-top">全局排名</div>
            <div class="li-bottom">{{ infoData.wholeRank }}/{{ infoData.wholeCount }}</div>
          </div>
        </div>
      </div>
      <div class="box_duty">
        <div class="box-title">关键词</div>
        <div class="duty-con">
          <div v-for="(item, index) in infoData.keyWords" :key="index" @click="toWork(item)">
            <img :src="ImgDeal(item.label)" alt="" />
            <span>{{ item.name }}</span>
          </div>
        </div>
      </div>
    </template>
  </div>
</template>

<script>
export default {
  name: 'ScoreInfo',
  components: {},
  props: {
    type: String,
    infoData: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {}
  },
  computed: {},
  filters: {
    AssessRankFilter(val) {
      switch (val) {
        case '1':
          return '好'
        case '2':
          return '较好'
        case '3':
          return '一般'
        case '4':
          return '较差'
        case '6':
          return '不定等次'

        default:
          break
      }
    },
  },
  watch: {},
  created() {},
  mounted() {
    console.log('this.infoData :>> ', this.infoData)
  },
  methods: {
    ImgDeal(label) {
      return require('@images/jxgl/jx.png')
      // if (label === '考勤') {
      //   return require('@images/jxgl/kq.png')
      // } else if (label === '荣誉') {
      //   return require('@images/jxgl/ry.png')
      // } else if (label === '绩效') {
      //   return require('@images/jxgl/jx.png')
      // }
    },
    toWork(item) {
      if (item.label === '绩效') return
      let stepa = ''
      if (item.label === '考勤') {
        stepa = 4
      } else if (item.dataType === 'bonus') {
        stepa = 7
      } else if (item.dataType === 'honor') {
        stepa = 8
      }
      this.$emit('toWork', stepa)
    },
  },
}
</script>

<style lang="scss" scoped>
.detail {
  background-color: #ffffff;
  border-radius: 4px;
  height: 100%;
  margin-left: 20px;
  padding: 20px;
  color: #5a5a5a;
  overflow: hidden;
  display: flex;
  flex-direction: column;

  .box-title {
    font-weight: 600;
    font-size: 18px;
  }

  .box-result {
    padding-top: 10px;
    padding-bottom: 15px;
    margin-bottom: 15px;
    border-bottom: 2px dashed #e8e8e8;

    .box-li {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 10px 0;

      .li {
        width: 49%;
        text-align: center;

        &:first-child {
          border-right: 1px solid #ebebeb;
        }

        .li-bottom {
          margin-top: 10px;
          font-size: 24px;
          font-weight: 600;
          color: #333333;
        }
      }
    }
  }

  .box_duty {
    overflow-y: auto;

    .duty-con {
      margin-top: 15px;
      line-height: 2;
      display: flex;
      flex-wrap: wrap;

      div {
        min-width: 50%;
        display: flex;
        align-items: center;
        // cursor: pointer;
        cursor: default;

        img {
          width: 25px;
          height: 25px;
          margin-right: 5px;
        }
      }
    }
  }
}
</style>
